<template>
  <div class="app-container">
    <el-form v-if="show" ref="params" v-permission="['sys:menu:list']" :model="params" :inline="true" class="search-form">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="params.menuName" />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="params.state" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="findPage">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm('params')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row class="btn-group" type="flex" justify="space-between">
      <el-col span="20">
        <el-button v-permission="['sys:menu:save']" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        <el-button
          v-permission="['sys:menu:update']"
          type="success"
          icon="el-icon-edit"
          :disabled="multipleSelection.length!==1"
          @click="edit"
        >修改
        </el-button>
        <el-button
          v-permission="['sys:menu:deleteIds']"
          type="danger"
          icon="el-icon-delete"
          :disabled="multipleSelection.length===0"
          @click="remove"
        >删除
        </el-button>
        <el-button v-permission="['sys:menu:export']" type="warning" icon="el-icon-download">导出</el-button>
      </el-col>
      <el-col span="4" align="right">
        <el-tooltip class="item" effect="dark" :content="show?'隐藏搜索':'显示搜索'" placement="top">
          <el-button icon="el-icon-search" circle @click="show = !show" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button icon="el-icon-refresh" circle @click="findPage" />
        </el-tooltip>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :default-expand-all="true"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data="data"
      row-key="id"
      tooltip-effect="dark"
      style="width: 100%"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        label="序号"
        type="index"
        align="center"
      />
      <el-table-column
        prop="menuName"
        label="菜单名称"
        align="center"
      />
      <el-table-column
        prop="icon"
        label="图标"
        align="center"
        width="50"
      >
        <template slot-scope="{row}">
          <svg-icon :icon-class="row.icon" />
        </template>
      </el-table-column>
      <el-table-column
        prop="permissionCode"
        label="权限编码"
        align="center"
      />
      <el-table-column
        prop="url"
        label="组件路径 "
        align="center"
      />
      <el-table-column
        prop="sort"
        label="排序值"
        align="center"
        width="70"
      />
      <el-table-column
        prop="state"
        label="状态"
        align="center"
      >
        <template slot-scope="{row}">
          {{ row.state ? "正常" : "停用" }}
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      />
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="{row}">
          <div>
            <el-button v-permission="['sys:menu:update']" type="text" icon="el-icon-edit" @click="edit(row.id)">修改</el-button>
            <el-button v-permission="['sys:menu:delete']" type="text" icon="el-icon-delete" @click="remove(row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <menu-form :id.sync="id" :title="title" :show.sync="dialogShow" />
  </div>
</template>

<script>
import { list, remove, removeIds } from '@/api/sys/menu'
import MenuForm from './components/MenuForm'

export default {
  name: 'Menu',
  components: { MenuForm },
  data() {
    return {
      id: null,
      menuId: null,
      data: [],
      options: [{ label: '停用', value: false }, { label: '正常', value: true }],
      show: true,
      params: { menuName: '', state: null },
      total: 0,
      title: '添加菜单',
      dialogShow: false,
      multipleSelection: [],
      itemShow: false
    }
  },
  created() {
    this.findPage()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    async findPage() {
      const params = { ...this.params }
      if (params.createTime) {
        params.startTime = params.createTime[0]
        params.endTime = params.createTime[1]
      }
      delete params.createTime
      const { data } = await list(params)
      this.data = data
    },
    add() {
      this.title = '添加菜单'
      this.dialogShow = true
    },
    edit(id) {
      this.title = '修改菜单'
      this.dialogShow = true
      this.id = typeof id === 'number' ? id : this.multipleSelection[0].id
    },
    remove(id) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (typeof id === 'number') {
          await remove(id)
          await this.findPage()
        } else {
          const ids = []
          this.multipleSelection.map(val => {
            ids.push(val.id)
          })
          await removeIds(ids)
          await this.findPage()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
